<template>
	<div class="Zhenrong">
		<template v-if='homeList.length > 0'>
			<div class="main">
				<!-- <div class="starting-lineup">
					<div class="home" data-type="451" v-if='homeCurrentNum == 451'>
						<span v-for='(item,index) in homeList' :data-pos='item.pos'>
							{{ item.num }}
							<div>{{item.name}}</div>
						</span>
					</div>
					<div class="home" data-type="343"  v-if='homeCurrentNum == 343'>
						<span v-for='(item,index) in homeList':data-pos='item.pos'>
							{{ item.num }}
							<div>{{item.name}}</div>
						</span>
					</div>
					<div class="home" data-type="352"  v-if='homeCurrentNum == 352'>
						<span v-for='(item,index) in homeList' :data-pos='item.pos'>
							{{ item.num }}
							<div>{{item.name}}</div>
						</span>
					</div>
					<div class="home" data-type="442"  v-if='homeCurrentNum == 442'>
						<span v-for='(item,index) in homeList' :data-pos='item.pos'>
							{{ item.num }}
							<div>{{item.name}}</div>
						</span>
					</div>
					<div class="home" data-type="433"  v-if='homeCurrentNum == 433'>
						<span v-for='(item,index) in homeList' :data-pos='item.pos'>
							{{ item.num }}
							<div>{{item.name}}</div>
						</span>
					</div>
					<div class="home" data-type="532"  v-if='homeCurrentNum == 532'>
						<span v-for='(item,index) in homeList' :data-pos='item.pos'>
							{{ item.num }}
							<div>{{item.name}}</div>
						</span>
					</div>
					<div class="home" data-type="541"  v-if='homeCurrentNum == 541'>
						<span v-for='(item,index) in homeList' :data-pos='item.pos'>
							{{ item.num }}
							<div>{{item.name}}</div>
						</span>
					</div>
	

					<div class="away" data-type="451" v-if='awayCurrentNum == 451'>
						<span v-for='(item,index) in awayList' :data-pos='item.pos'>
							{{ item.num }}
							<div>{{item.name}}</div>
						</span>
					</div>
					<div class="away" data-type="343" v-if='awayCurrentNum == 343'>
						<span v-for='(item,index) in awayList' :data-pos='item.pos'>
							{{ item.num }}
							<div>{{item.name}}</div>
						</span>
					</div>
					<div class="away" data-type="352" v-if='awayCurrentNum == 352'>
						<span v-for='(item,index) in awayList' :data-pos='item.pos'>
							{{ item.num }}
							<div>{{item.name}}</div>
						</span>
					</div>
					<div class="away" data-type="442" v-if='awayCurrentNum == 442'>
						<span v-for='(item,index) in awayList' :data-pos='item.pos'>
							{{ item.num }}
							<div>{{item.name}}</div>
						</span>
					</div>
					<div class="away" data-type="433" v-if='awayCurrentNum == 433'>
						<span v-for='(item,index) in awayList' :data-pos='item.pos'>
							{{ item.num }}
							<div>{{item.name}}</div>
						</span>
					</div>
					<div class="away" data-type="532" v-if='awayCurrentNum == 532'>
						<span v-for='(item,index) in awayList' :data-pos='item.pos'>
							{{ item.num }}
							<div>{{item.name}}</div>
						</span>
					</div>
					<div class="away" data-type="541" v-if='awayCurrentNum == 541'>
						<span v-for='(item,index) in awayList' :data-pos='item.pos'>
							{{ item.num }}
							<div>{{item.name}}</div>
						</span>
					</div>
				</div> -->
				<div class="starting-lineup">
	                <div class="home" data-type="451" v-show="homeCurrentNum=='451'">
	                    <span v-for="x in homeList" v-if="x.pos=='1'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span v-for="x in homeList" v-if="x.pos=='2'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span v-for="x in homeList" v-if="x.pos=='3'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span v-for="x in homeList" v-if="x.pos=='4'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span v-for="x in homeList" v-if="x.pos=='5'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span v-for="x in homeList" v-if="x.pos=='6'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span v-for="x in homeList" v-if="x.pos=='7'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span v-for="x in homeList" v-if="x.pos=='8'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span v-for="x in homeList" v-if="x.pos=='9'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span v-for="x in homeList" v-if="x.pos=='10'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span v-for="x in homeList" v-if="x.pos=='11'">{{x.num}}<div>{{x.name}}</div></span>
	                </div>
	                <div class="home " data-type="343" v-show="homeCurrentNum=='343'">
	                    <span  v-for="x in homeList" v-if="x.pos=='1'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 25%;" v-for="x in homeList" v-if="x.pos=='2'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 50%;" v-for="x in homeList" v-if="x.pos=='3'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 75%;" v-for="x in homeList" v-if="x.pos=='4'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px;left: 20%;" v-for="x in homeList" v-if="x.pos=='5'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px; left: 40%;" v-for="x in homeList" v-if="x.pos=='6'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px; left: 60%;" v-for="x in homeList" v-if="x.pos=='7'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px; left: 80%;" v-for="x in homeList" v-if="x.pos=='8'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 25%;top: 290px;" v-for="x in homeList" v-if="x.pos=='9'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 50%;top: 290px;" v-for="x in homeList" v-if="x.pos=='10'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 75%;top: 290px;" v-for="x in homeList" v-if="x.pos=='11'">{{x.num}}<div>{{x.name}}</div></span>
	                </div>
	                <div class="home " data-type="352" v-show="homeCurrentNum=='352'">
	                    <span v-for="x in homeList" v-if="x.pos=='1'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 25%;"v-for="x in homeList" v-if="x.pos=='2'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 50%;"v-for="x in homeList" v-if="x.pos=='3'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 75%;"v-for="x in homeList" v-if="x.pos=='4'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 198px;left: 40%;"v-for="x in homeList" v-if="x.pos=='5'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 198px; left: 60%;"v-for="x in homeList" v-if="x.pos=='6'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 250px; left: 20%;"v-for="x in homeList" v-if="x.pos=='7'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 250px; left: 50%;"v-for="x in homeList" v-if="x.pos=='8'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 250px; left: 80%;"v-for="x in homeList" v-if="x.pos=='9'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 310px; left: 40%;"v-for="x in homeList" v-if="x.pos=='10'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 310px; left: 60%;"v-for="x in homeList" v-if="x.pos=='11'">{{x.num}}<div>{{x.name}}</div></span>
	                </div>
	                <div class="home " data-type="442" v-show="homeCurrentNum=='442'">
	                    <span v-for="x in homeList" v-if="x.pos=='1'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 20%;"v-for="x in homeList" v-if="x.pos=='2'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 40%;"v-for="x in homeList" v-if="x.pos=='3'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 60%;"v-for="x in homeList" v-if="x.pos=='4'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 127px;left: 80%;"v-for="x in homeList" v-if="x.pos=='5'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px; left: 20%;"v-for="x in homeList" v-if="x.pos=='6'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px; left: 40%;"v-for="x in homeList" v-if="x.pos=='7'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px; left: 60%;"v-for="x in homeList" v-if="x.pos=='8'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px; left: 80%;"v-for="x in homeList" v-if="x.pos=='9'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 310px; left: 38%;"v-for="x in homeList" v-if="x.pos=='10'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 310px; left: 62%;"v-for="x in homeList" v-if="x.pos=='11'">{{x.num}}<div>{{x.name}}</div></span>
	                </div>
	                <div class="home " data-type="442" v-show="homeCurrentNum=='431-2'">
	                    <span v-for="x in homeList" v-if="x.pos=='1'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 20%;"v-for="x in homeList" v-if="x.pos=='2'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 40%;"v-for="x in homeList" v-if="x.pos=='3'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 60%;"v-for="x in homeList" v-if="x.pos=='4'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 127px;left: 80%;"v-for="x in homeList" v-if="x.pos=='5'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px; left: 20%;"v-for="x in homeList" v-if="x.pos=='6'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px; left: 40%;"v-for="x in homeList" v-if="x.pos=='7'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px; left: 60%;"v-for="x in homeList" v-if="x.pos=='8'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px; left: 80%;"v-for="x in homeList" v-if="x.pos=='9'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 310px; left: 38%;"v-for="x in homeList" v-if="x.pos=='10'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 310px; left: 62%;"v-for="x in homeList" v-if="x.pos=='11'">{{x.num}}<div>{{x.name}}</div></span>
	                </div>
	                <div class="home " data-type="433" v-show="homeCurrentNum=='433'">
	                    <span v-for="x in homeList" v-if="x.pos=='1'">1<div>马布里</div></span>
	                    <span style="left: 20%;"v-for="x in homeList" v-if="x.pos=='2'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 40%;"v-for="x in homeList" v-if="x.pos=='3'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 60%;"v-for="x in homeList" v-if="x.pos=='4'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 127px;left: 80%;"v-for="x in homeList" v-if="x.pos=='5'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px; left: 25%;"v-for="x in homeList" v-if="x.pos=='6'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px; left: 50%;"v-for="x in homeList" v-if="x.pos=='7'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px; left: 75%;"v-for="x in homeList" v-if="x.pos=='8'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 310px; left: 25%;"v-for="x in homeList" v-if="x.pos=='9'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 310px; left: 50%;"v-for="x in homeList" v-if="x.pos=='10'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 310px; left: 75%;"v-for="x in homeList" v-if="x.pos=='11'">{{x.num}}<div>{{x.name}}</div></span>
	                </div>
	                <div class="home " data-type="532" v-show="homeCurrentNum=='532'">
	                    <span  v-for="x in homeList" v-if="x.pos=='1'">1<div>马布里</div></span>
	                    <span style="left: 17%;" v-for="x in homeList" v-if="x.pos=='2'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 34%;" v-for="x in homeList" v-if="x.pos=='3'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 50%;" v-for="x in homeList" v-if="x.pos=='4'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 127px;left: 67%;" v-for="x in homeList" v-if="x.pos=='5'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 127px; left: 84%;" v-for="x in homeList" v-if="x.pos=='6'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px; left: 25%;" v-for="x in homeList" v-if="x.pos=='7'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px; left: 50%;" v-for="x in homeList" v-if="x.pos=='8'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px; left: 75%;" v-for="x in homeList" v-if="x.pos=='9'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 310px; left: 40%;" v-for="x in homeList" v-if="x.pos=='10'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 310px; left: 60%;" v-for="x in homeList" v-if="x.pos=='11'">{{x.num}}<div>{{x.name}}</div></span>
	                </div>
	                <div class="home" data-type="541" v-show="homeCurrentNum=='541'">
	                    <span v-for="x in homeList" v-if="x.pos=='1'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 17%;"v-for="x in homeList" v-if="x.pos=='2'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 34%;"v-for="x in homeList" v-if="x.pos=='3'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 50%;"v-for="x in homeList" v-if="x.pos=='4'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 127px;left: 67%;"v-for="x in homeList" v-if="x.pos=='5'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 127px; left: 84%;"v-for="x in homeList" v-if="x.pos=='6'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px; left: 20%;"v-for="x in homeList" v-if="x.pos=='7'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px; left: 40%;"v-for="x in homeList" v-if="x.pos=='8'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px; left: 60%;"v-for="x in homeList" v-if="x.pos=='9'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 210px; left: 80%;"v-for="x in homeList" v-if="x.pos=='10'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="top: 310px; left: 50%;"v-for="x in homeList" v-if="x.pos=='11'">{{x.num}}<div>{{x.name}}</div></span>
	                </div>
	                <div class="away " data-type="451" v-show="awayCurrentNum=='451'">
	                    <span v-for="x in awayList" v-if="x.pos=='1'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span v-for="x in awayList" v-if="x.pos=='2'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span v-for="x in awayList" v-if="x.pos=='3'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span v-for="x in awayList" v-if="x.pos=='4'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span v-for="x in awayList" v-if="x.pos=='5'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span v-for="x in awayList" v-if="x.pos=='6'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span v-for="x in awayList" v-if="x.pos=='7'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span v-for="x in awayList" v-if="x.pos=='8'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span v-for="x in awayList" v-if="x.pos=='9'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span v-for="x in awayList" v-if="x.pos=='10'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span v-for="x in awayList" v-if="x.pos=='11'">{{x.num}}<div>{{x.name}}</div></span>
	                </div>
	                <div class="away " data-type="343" v-show="awayCurrentNum=='343'">
	                    <span v-for="x in awayList" v-if="x.pos=='1'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 25%;" v-for="x in awayList" v-if="x.pos=='2'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 50%;" v-for="x in awayList" v-if="x.pos=='3'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 75%;" v-for="x in awayList" v-if="x.pos=='4'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px;left: 20%;" v-for="x in awayList" v-if="x.pos=='5'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px;left: 40%;" v-for="x in awayList" v-if="x.pos=='6'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px;left: 60%;" v-for="x in awayList" v-if="x.pos=='7'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px;left: 80%;" v-for="x in awayList" v-if="x.pos=='8'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 290px;left: 25%;" v-for="x in awayList" v-if="x.pos=='9'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 290px;left: 50%;" v-for="x in awayList" v-if="x.pos=='10'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 290px;left: 75%;" v-for="x in awayList" v-if="x.pos=='11'">{{x.num}}<div>{{x.name}}</div></span>
	                </div>
	                <div class="away " data-type="352" v-show="awayCurrentNum=='352'">
	                    <span v-for="x in awayList" v-if="x.pos=='1'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 25%;" v-for="x in awayList" v-if="x.pos=='2'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 50%;" v-for="x in awayList" v-if="x.pos=='3'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 75%;" v-for="x in awayList" v-if="x.pos=='4'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 198px;left: 40%;" v-for="x in awayList" v-if="x.pos=='5'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 198px; left: 60%;" v-for="x in awayList" v-if="x.pos=='6'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 250px; left: 20%;" v-for="x in awayList" v-if="x.pos=='7'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 250px; left: 50%;" v-for="x in awayList" v-if="x.pos=='8'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 250px; left: 80%;" v-for="x in awayList" v-if="x.pos=='9'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 310px; left: 40%;" v-for="x in awayList" v-if="x.pos=='10'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 310px; left: 60%;" v-for="x in awayList" v-if="x.pos=='11'">{{x.num}}<div>{{x.name}}</div></span>
	                </div>
	                <div class="away" data-type="442" v-show="awayCurrentNum=='442'">
	                    <span v-for="x in awayList" v-if="x.pos=='1'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 20%;" v-for="x in awayList" v-if="x.pos=='2'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 40%;" v-for="x in awayList" v-if="x.pos=='3'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 60%;" v-for="x in awayList" v-if="x.pos=='4'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 127px;left: 80%;" v-for="x in awayList" v-if="x.pos=='5'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px; left: 20%;" v-for="x in awayList" v-if="x.pos=='6'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px; left: 40%;" v-for="x in awayList" v-if="x.pos=='7'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px; left: 60%;" v-for="x in awayList" v-if="x.pos=='8'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px; left: 80%;" v-for="x in awayList" v-if="x.pos=='9'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 310px; left: 38%;" v-for="x in awayList" v-if="x.pos=='10'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 310px; left: 62%;" v-for="x in awayList" v-if="x.pos=='11'">{{x.num}}<div>{{x.name}}</div></span>
	                </div>
	                <div class="away" data-type="442" v-show="awayCurrentNum=='431-2'">
	                    <span v-for="x in awayList" v-if="x.pos=='1'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 20%;" v-for="x in awayList" v-if="x.pos=='2'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 40%;" v-for="x in awayList" v-if="x.pos=='3'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 60%;" v-for="x in awayList" v-if="x.pos=='4'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 127px;left: 80%;" v-for="x in awayList" v-if="x.pos=='5'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px; left: 20%;" v-for="x in awayList" v-if="x.pos=='6'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px; left: 40%;" v-for="x in awayList" v-if="x.pos=='7'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px; left: 60%;" v-for="x in awayList" v-if="x.pos=='8'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px; left: 80%;" v-for="x in awayList" v-if="x.pos=='9'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 310px; left: 38%;" v-for="x in awayList" v-if="x.pos=='10'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 310px; left: 62%;" v-for="x in awayList" v-if="x.pos=='11'">{{x.num}}<div>{{x.name}}</div></span>
	                </div>
	                <div class="away " data-type="433" v-show="awayCurrentNum=='433'">
	                    <span v-for="x in awayList" v-if="x.pos=='1'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 20%;" v-for="x in awayList" v-if="x.pos=='2'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 40%;" v-for="x in awayList" v-if="x.pos=='3'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 60%;" v-for="x in awayList" v-if="x.pos=='4'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 127px;left: 80%;" v-for="x in awayList" v-if="x.pos=='5'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px; left: 25%;" v-for="x in awayList" v-if="x.pos=='6'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px; left: 50%;" v-for="x in awayList" v-if="x.pos=='7'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px; left: 75%;" v-for="x in awayList" v-if="x.pos=='8'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 310px; left: 25%;" v-for="x in awayList" v-if="x.pos=='9'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 310px; left: 50%;" v-for="x in awayList" v-if="x.pos=='10'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 310px; left: 75%;" v-for="x in awayList" v-if="x.pos=='11'">{{x.num}}<div>{{x.name}}</div></span>
	                </div>
	                <div class="away " data-type="532" v-show="awayCurrentNum=='532'">
	                    <span v-for="x in awayList" v-if="x.pos=='1'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 17%;" v-for="x in awayList" v-if="x.pos=='2'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 34%;" v-for="x in awayList" v-if="x.pos=='3'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 50%;" v-for="x in awayList" v-if="x.pos=='4'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 127px;left: 67%;" v-for="x in awayList" v-if="x.pos=='5'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 127px; left: 84%;" v-for="x in awayList" v-if="x.pos=='6'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px; left: 25%;" v-for="x in awayList" v-if="x.pos=='7'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px; left: 50%;" v-for="x in awayList" v-if="x.pos=='8'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px; left: 75%;" v-for="x in awayList" v-if="x.pos=='9'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 310px; left: 40%;" v-for="x in awayList" v-if="x.pos=='10'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 310px; left: 60%;" v-for="x in awayList" v-if="x.pos=='11'">{{x.num}}<div>{{x.name}}</div></span>
	                </div>
	                <div class="away " data-type="541" v-show="awayCurrentNum=='541'">
	                    <span v-for="x in awayList" v-if="x.pos=='1'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 17%;" v-for="x in awayList" v-if="x.pos=='2'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 34%;" v-for="x in awayList" v-if="x.pos=='3'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="left: 50%;" v-for="x in awayList" v-if="x.pos=='4'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 127px;left: 67%;" v-for="x in awayList" v-if="x.pos=='5'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 127px; left: 84%;" v-for="x in awayList" v-if="x.pos=='6'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px; left: 20%;" v-for="x in awayList" v-if="x.pos=='7'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px; left: 40%;" v-for="x in awayList" v-if="x.pos=='8'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px; left: 60%;" v-for="x in awayList" v-if="x.pos=='9'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 210px; left: 80%;" v-for="x in awayList" v-if="x.pos=='10'">{{x.num}}<div>{{x.name}}</div></span>
	                    <span style="bottom: 310px; left: 50%;" v-for="x in awayList" v-if="x.pos=='11'">{{x.num}}<div>{{x.name}}</div></span>
	                </div>
	            </div>
			</div>
			<div class="teamerList">
				<h3>替补</h3>
				<div class="teamerList-box">
					<ul class="teamerList-l">
						<li 
							v-for='(itemHTB,index) in homeList'
							v-if='itemHTB.pos===0'
							@click='goshooterDeatil(hEngName,itemHTB.num)'>
							<span class="icon">{{ itemHTB.num }}</span>
							<div>
								<p>{{ itemHTB.name | ellipses("6") }}</p>
								<span class="txt">{{ itemHTB.p_pos | textNull  }}</span>
							</div>
						</li>
					</ul>
					<ul class="teamerList-r">
						<li 
							v-for='(itemATB,index) in awayList'
							v-if='itemATB.pos===0'
							@click='goshooterDeatil(aEngName,itemATB.num)'>
							<div>
								<p>{{ itemATB.name | ellipses("6") }}</p>
								<span class="txt">{{ itemATB.p_pos | textNull }}</span>
							</div>
							<span class="icon">{{ itemATB.num }}</span>
						</li>
					</ul>
				</div>
			</div>
		</template>
		<div v-else class="noData">暂无比赛阵容！</div>
	</div>
</template>
<script>
export default {
	name: 'deatilZhenrong',
	props:{
      homeList:Array,
      awayList:Array,
      aEngName:String,
      hEngName:String,
      homeCurrentNum:String,
      awayCurrentNum:String,
    },
	data: function(){
		return {}
	},
	methods:{
		goshooterDeatil(name,num){
			this.$router.push('/ShooterList/'+name+'/'+num)
		}
	},
	mounted:function() {
		
	},
	updated(){
		
	}
};
</script>

<style lang="less" scoped>
	@import '~styles/varibles.less';
	.teamerList{
		padding: .6rem 0 .2rem;
		h3{
			color: #333;
			font-weight: bold;
			text-align: center;
		}
	}
	.main span[data-pos='0'] {
	    display: none;
	}
	.teamerList-box{
		display: flex;
		ul{
			flex: 1;
			li{
				padding:.2rem .1rem;
				border-bottom: 1px solid #E5E5E5;
				display: flex;
				align-items:center;
				span.icon{
					width: .9rem;
				    height: .9rem;
				    text-align: center;
				    line-height: .9rem;
				    vertical-align: middle;
				    display: inline-block;
				    font-size: 12px;
				}
				p{
					line-height: .36rem;
					color: #333;
					font-size: .26rem;
					font-weight: bold;
				}
				.txt{
				    color: #A9A9A9;
				    line-height: 22px;
				}
			}
		}
		.teamerList-r li{
			justify-content: flex-end;
			text-align: right;
			span.icon{
				background: url(/static/img/player-away.png) no-repeat left center;
				background-size: .9rem;
				color: #fff;
				margin-left: .2rem;
			}
		}
		.teamerList-l li{
			justify-content: flex-start;
			span.icon{
				background: url(/static/img/player-home.png) no-repeat left center;
				background-size: .9rem;
				color: #fff;
				margin-right: .2rem;
			}
		}
	}

	.starting-lineup{
	    height: 798px;
	    width: 100%;
	    background: url("/static/img/soccer.png") no-repeat;
	    background-size: 100%  798px;
	    border-bottom: 10px solid #f5f5f5;
	    position: relative;
	}
	.starting-lineup .home,
	.starting-lineup .away{
	    height: 50%;
	    width: 100%;
	    position: relative;
	}
	.starting-lineup>div>span{
	    height: 30px;
	    width: 30px;
	    line-height: 30px;
	    position: absolute;
	    text-align: center;
	    color: #fff;
	    font-size: 10px;
	    background: url("/static/img/player-home.png");
	    background-size: 30px  30px;
	}
	.starting-lineup>.away>span{
	    background: url("/static/img/player-away.png");
	    background-size: 30px  30px;
	}
	.starting-lineup>div>span>div{
	    width: 70px;
	    height: 20px;
	    line-height: 20px;
	    margin-left: -20px;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    color: #fff;
	}
	/*球队阵型多项选择*/
	/*1324*/
	/*主队*/
	/*门将*/
	.starting-lineup>.home>span:first-child{
	    top: 55px;
	    left: 50%;
	    margin-left: -15px;
	}
	/*后卫*/
	.starting-lineup>.home>span:nth-child(2){
	    top: 127px;
	    left: 20%;
	    margin-left: -15px;
	}
	.starting-lineup>.home>span:nth-child(3){
	    top: 127px;
	    left: 40%;
	    margin-left: -15px;
	}
	.starting-lineup>.home>span:nth-child(4){
	    top: 127px;
	    left: 60%;
	    margin-left: -15px;
	}
	.starting-lineup>.home>span:nth-child(5){
	    top: 127px;
	    left: 80%;
	    margin-left: -15px;
	}
	/*中场*/
	.starting-lineup>.home>span:nth-child(6){
	    top: 198px;
	    left: 40%;
	    margin-left: -15px;
	}
	.starting-lineup>.home>span:nth-child(7){
	    top: 198px;
	    left: 60%;
	    margin-left: -15px;
	}
	.starting-lineup>.home>span:nth-child(8){
	    top: 270px;
	    left: 25%;
	    margin-left: -15px;
	}
	.starting-lineup>.home>span:nth-child(9){
	    top: 270px;
	    left: 50%;
	    margin-left: -15px;
	}
	.starting-lineup>.home>span:nth-child(10){
	    top: 270px;
	    left: 75%;
	    margin-left: -15px;
	}
	/*前锋*/
	.starting-lineup>.home>span:nth-child(11){
	    top: 340px;
	    left: 50%;
	    margin-left: -15px;
	}
	/*1243*/
	/*客队队*/
	/*门将*/
	.starting-lineup>.away>span:first-child{
	    bottom: 55px;
	    left: 50%;
	    margin-left: -15px;
	}
	/*后卫*/
	.starting-lineup>.away>span:nth-child(2){
	    bottom: 127px;
	    left: 20%;
	    margin-left: -15px;
	}
	.starting-lineup>.away>span:nth-child(3){
	    bottom: 127px;
	    left: 40%;
	    margin-left: -15px;
	}
	.starting-lineup>.away>span:nth-child(4){
	    bottom: 127px;
	    left: 60%;
	    margin-left: -15px;
	}
	.starting-lineup>.away>span:nth-child(5){
	    bottom: 127px;
	    left: 80%;
	    margin-left: -15px;
	}
	.starting-lineup>.away>span:nth-child(6){
	    bottom: 198px;
	    left: 40%;
	    margin-left: -15px;
	}
	.starting-lineup>.away>span:nth-child(7){
	    bottom: 198px;
	    left: 60%;
	    margin-left: -15px;
	}
	/*中场*/
	.starting-lineup>.away>span:nth-child(8){
	    bottom: 270px;
	    left: 25%;
	    margin-left: -15px;
	}
	.starting-lineup>.away>span:nth-child(9){
	    bottom: 270px;
	    left: 50%;
	    margin-left: -15px;
	}
	.starting-lineup>.away>span:nth-child(10){
	    bottom: 270px;
	    left: 75%;
	    margin-left: -15px;
	}
	/*前锋*/
	.starting-lineup>.away>span:nth-child(11){
	    bottom: 340px;
	    left: 50%;
	    margin-left: -15px;
	}
	/*替补*/
	.substitute-lineup{
	    width: 100%;
	    height: auto;
	}
	.substitute-lineup .title{
	    height: 30px;
	    width: 100%;
	    padding-left: 10px ;
	    color: #333;
	    line-height: 30px;
	    font-size: 12px;
	    font-weight: bold;
	}
	.substitute-lineup>div{
	    width: 50%;
	    height: 100%;
	}
	.substitute-lineup>div>div{
	    position: relative;
	    height: 60px;
	    width: 100%;
	    border-bottom: 1px solid #e6e6e6;
	    overflow: hidden;
	}
	.substitute-lineup .home .player{
	    position: absolute;
	    top: 0;
	    left: 0;
	    height: 30px;
	    line-height: 30px;
	    margin: 15px 10px;
	    width: 30px;
	    background: url("/static/img/play-home.png") no-repeat;
	    background-size: 30px;
	    float: left;
	    color: #fff;
	    text-align: center;
	    font-size: 10px;
	}
	.substitute-lineup .home .name{
	    float: left;
	    height: 30px;
	    margin: 15px 0;
	    margin-left: 50px;
	}
	.substitute-lineup .home .name p{
	    height: 15px;
	    width: 100%;
	    font-size: 14px;
	    line-height: 15px;
	    color: #333;
	    font-weight: bold;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.substitute-lineup .home .name p:last-child{
	    font-size: 12px;
	    line-height: 18px;
	    color: #999;
	    font-weight: normal;
	}

	.substitute-lineup .away .player{
	    position: absolute;
	    right: 0;
	    top: 0;
	    height: 30px;
	    line-height: 30px;
	    margin: 15px 10px;
	    width: 30px;
	    background: url("/static/img/play-away.png") no-repeat;
	    background-size: 30px;
	    float: right;
	    color: #fff;
	    text-align: center;
	    font-size: 10px;
	}
	.substitute-lineup .away .name{
	    float: right;
	    height: 30px;
	    margin: 15px 0;
	    margin-right: 50px;
	}
	.substitute-lineup .away .name p{
	    height: 15px;
	    width: 100%;
	    font-size: 14px;
	    line-height: 15px;
	    color: #333;
	    font-weight: bold;
	    text-align: right;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.substitute-lineup .away .name p:last-child{
	    font-size: 12px;
	    line-height: 18px;
	    color: #999;
	    font-weight: normal;
	    text-align: right;
	}
</style>